<template>
	<view ref="dombg">
		<tm-sheet
			:followTheme="props.followTheme"
			:text="false"
			:userInteractionEnabled="false"
			:width="6"
			:color="props.color"
			:height="_size / 2"
			:margin="[0, 0]"
			:padding="[0, 0]"
		>
		</tm-sheet>
	</view>
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, getCurrentInstance, nextTick } from 'vue'
import tmSheet from '../tm-sheet/tm-sheet.vue'
// #ifdef APP-PLUS-NVUE
const animation = uni.requireNativePlugin('animation')
// #endif
const { proxy } = getCurrentInstance()
const props = defineProps({
	followTheme: {
		type: [Boolean, String],
		default: true
	},
	color: {
		type: String,
		default: 'primary'
	},
	size: {
		type: Number,
		default: 50
	}
})
const _size = computed(() => props.size)

onMounted(() => {
	// #ifdef APP-PLUS-NVUE
	nextTick(function () {
		setTimeout(function () {
			spinNvueAni()
		}, 50)
	})
	// #endif
})

function spinNvueAni(opacity = 0) {
	let icon = proxy?.$refs?.dombg
	if (!icon) return
	animation.transition(
		icon,
		{
			styles: {
				opacity: opacity
			},
			duration: 600, //ms
			timingFunction: 'linear',
			delay: 0 //ms
		},
		() => {
			nextTick(function () {
				spinNvueAni(opacity == 0 ? 1 : 0)
			})
		}
	)
}
</script>
